<template>
    <div style="padding: 4px 0 30px">
        <div class="Grid Grid--1of5 Grid--center Grid--justifyCenter text-center" style="width: calc(100%)">
            <div class="Grid Grid-cell Grid--center Grid--justifyCenter" style="padding: 22px 0;margin-right: 20px;background: #EBF6F9;">
                <img width="66px" height="66px" src="https://liaoma-test.oss-cn-shenzhen.aliyuncs.com/liaoma/admin/assets/images/order.png" alt="">
                <div class="ml-4">
                    <div class="text-xl mb-1" style="text-align: left;font-size: 30px;color: #222222;">{{total.orders}}</div>
                    <div style="color: #666666;font-size: 14px;text-align: left;">订单数量</div>
                </div>
            </div>
            <div class="Grid Grid-cell Grid--center Grid--justifyCenter" style="padding: 22px 0;margin-right: 20px;background: #EBF6F9;">
                <img width="66px" height="66px" src="https://liaoma-test.oss-cn-shenzhen.aliyuncs.com/liaoma/admin/assets/images/refund_orders.png" alt="">
                <div class="ml-4">
                    <div class="text-xl mb-1" style="text-align: left;font-size: 30px;color: #222222;">{{total.refund_orders}}</div>
                    <div style="color: #666666;font-size: 14px;text-align: left;">退单数量</div>
                </div>
            </div>
            <div class="Grid Grid-cell Grid--center Grid--justifyCenter" style="padding: 22px 0;margin-right: 20px;background: #EBF6F9;">
                <img width="66px" height="66px" src="https://liaoma-test.oss-cn-shenzhen.aliyuncs.com/liaoma/admin/assets/images/order_amount.png" alt="">
                <div class="ml-4">
                    <div v-if="total.order_amount" class="text-xl mb-1" style="text-align: left;font-size: 30px;color: #222222;">&yen;{{total.order_amount}}</div>
                    <div style="color: #666666;font-size: 14px;text-align: left;">销售金额</div>
                </div>
            </div>
            <div class="Grid Grid-cell Grid--center Grid--justifyCenter" style="padding: 22px 0;margin-right: 20px;background: #EBF6F9;">
                <img width="66px" height="66px" src="https://liaoma-test.oss-cn-shenzhen.aliyuncs.com/liaoma/admin/assets/images/pay_real.png" alt="">
                <div class="ml-4">
                    <div v-if="total.pay_real" class="text-xl mb-1" style="text-align: left;font-size: 30px;color: #222222;">&yen;{{total.pay_real}}</div>
                    <div style="color: #666666;font-size: 14px;text-align: left;">实收金额</div>
                </div>
            </div>
            <div class="Grid Grid-cell Grid--center Grid--justifyCenter" style="padding: 22px 0;margin-right: 20px;background: #EBF6F9;">
                <img width="66px" height="66px" src="https://liaoma-test.oss-cn-shenzhen.aliyuncs.com/liaoma/admin/assets/images/refund_amount.png" alt="">
                <div class="ml-4">
                    <div v-if="total.refund_amount" class="text-xl mb-1" style="text-align: left;font-size: 30px;color: #222222;">&yen;{{total.refund_amount}}</div>
                    <div style="color: #666666;font-size: 14px;text-align: left;">退款金额</div>
                </div>
            </div>
            <div v-if="isSHow" class="Grid Grid-cell Grid--center Grid--justifyCenter" style="padding: 22px 0;margin-right: 20px;background: #EBF6F9;">
                <img width="66px" height="66px" src="https://liaoma-test.oss-cn-shenzhen.aliyuncs.com/liaoma/admin/assets/images/recharge_amount.png" alt="">
                <div class="ml-4">
                    <div v-if="total.recharge_amount" class="text-xl mb-1" style="text-align: left;font-size: 30px;color: #222222;">&yen;{{total.recharge_amount}}</div>
                    <div style="color: #666666;font-size: 14px;text-align: left;">充值金额</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props: ['total','isSHow'],
    data () {
        return {
            
        }
    }
}
</script>